<template>
	<view>
		<!-- 最上边的搜索栏 -->
		<view style="width:100%; background-color: #fff;position: sticky;" class="flex justify-center top-hight">
			<view style="width: 95%;">
				<view class="padding-top">
					<u-search placeholder="请输入任务标题" @search="search" :showAction="false" />
				</view>
				<view class="padding-top flex justify-center align-end">
					<u-tabs lineWidth="70" :list="list" @change="changeTab" keyName="label" :activeStyle="{
					            color: '#303133',
					            fontWeight: 'bold',
					            transform: 'scale(1.05)'
					        }" :inactiveStyle="{
					            color: '#606266',
					            transform: 'scale(1)'
					        }" itemStyle="height: 34px;">
					</u-tabs>
				</view>
			</view>
		</view>


		<!-- 卡片集合 -->
		<scroll-view :scroll-y="true" v-if="cardArr.length > 0" :style="{height:scrollHeight+'px'}"
			@scrolltolower="scrolltolower">


			<view class="flex justify-center">
				<view>
					<view v-for="(card,index) in cardArr" :key="index">
						<view @click="toDetailPage(card.id)" class="member-card">
							<!-- 第一行 -->
							<view class="flex justify-between">
								<view class="flex justify-center align-end  single" style="margin: 0 1% 0 3%;">
									<font class="single text-bold text-lg">{{card.title}}</font>
								</view>
								<view class="card-tag flex justify-center align-center"
									:style="{backgroundColor: card.userStatus.color}">
									{{`我${card.userStatus.name}`}}
								</view>
							</view>

							<!-- 卡片下边 -->
							<view class="padding-top-sm">
								<view class="flex justify-center">
									<view style="width: 95%;" class="flex justify-between align-center">
										<view style="width: 200upx;" class="flex">
											<u-tag :text="`${card.createUser}发起`" type="success" size="mini" plain
												plainFill></u-tag>
										</view>
										<view>
											<u--text prefixIcon="tags" size="13"
												iconStyle="font-size: 15px;color: #508AE2" type="primary"
												:text="`任务${card.taskStatus}`" />
										</view>
									</view>
								</view>
								<view class="flex justify-center padding-top padding-bottom">
									<view style="width: 95%;" class="flex justify-between">
										<view>
											<u--text prefixIcon="calendar" size="13"
												iconStyle="font-size: 15px;color: #508AE2" type="primary"
												:text="`${card.timeout} 结束`" />
										</view>
										<view>
											<u--text prefixIcon="hourglass-half-fill" size="13"
												:iconStyle="{fontSize: '15px',color: card.countDown.color}"
												:color="card.countDown.color" :text="card.countDown.title">
											</u--text>
										</view>
									</view>
								</view>

							</view>

						</view>
					</view>
				</view>
			</view>
			<view style="height: 20upx;" />
		</scroll-view>

		<view style="margin-top: 50%;" v-if="cardArr.length === 0">
			<u-empty text="无数据" />
		</view>




	</view>
</template>

<script>
	import store from '@/store'
	import {
		page,
		tabList
	} from '@/api/task.js'
	export default {
		watch: {
			currentTab(val) {
				console.log('currentTab=====', val)
			}
		},
		onReady() {
			let _this = this;
			uni.getSystemInfo({ //调用uni-app接口获取屏幕高度
				success(res) { //成功回调函数
					let wHeight = res.windowHeight //windoHeight为窗口高度，主要使用的是这个
					let titleH = uni.createSelectorQuery().select(".top-hight"); //想要获取高度的元素名（class/id）
					titleH.boundingClientRect(data => {
						_this.scrollHeight = wHeight - data.top - 80 - 20 -
							10 //计算高度：元素高度=窗口高度-元素距离顶部的距离（data.top）
					}).exec()
				}
			})
			_this.getTabList()
			_this.queryList()
		},
		data() {
			return {
				backReason: '',
				backShow: false,
				isBackWorkOrder: false,
				isMember: false,
				isLeader: false,
				selectMembers: [],
				membersShow: false,
				currentTab: 0,
				memberArr: [],
				cardSelectArr: [],
				loading: false,
				total: {},
				queryParams: {
					pageNo: 1,
					pageSize: 5,
					type: 'photo',
					title: null
				},
				scrollHeight: 0,
				// list: [],
				// 或者如下，也可以配置keyName参数修改对象键名
				list: [{
					name: '图片收集',
					value: "fafafdas"
				}],
				curNow: 0,
				keyword: '',
				cardArr: []
			}
		},
		methods: {
			toDetailPage(id) {
				uni.navigateTo({
					url: `/pages/work/task/detail?id=${id}`
				})
			},
			changeTab(val) {
				console.log('val======', val)
				this.currentTab = val.index
				// if (this.isMember) {
				// 	val.index += 1
				// }
				this.queryParams.type = val.value
				console.log('val====', val)
				this.resetQueryPage()
				// this.queryTotal()
				this.queryList()
			},
			resetQueryPage() {
				this.queryParams.pageNo = 1
				this.queryParams.pageSize = 5
				this.cardArr = []
			},
			search(val) {
				this.queryParams.title = val
				this.resetQueryPage()
				this.queryList()
			},
			queryList() {
				this.$modal.loading("加载中")
				page(this.queryParams).then(res => {
					this.cardArr = [...this.cardArr, ...res.data.list]
					this.$modal.closeLoading()
				}).finally(() => {
					this.$modal.closeLoading()
				})
			},
			queryTotal() {
				total().then(res => {
					this.list = res.data
				})
			},
			scrolltolower() {
				this.queryParams.pageNo += 1
				this.queryList()
			},
			getTabList() {
				tabList().then(res => {
					this.list = res.data
				})
			}


		}
	}
</script>

<style scoped>
	.member-card {
		width: 680upx;
		margin-top: 10px;
		border-radius: 20upx;
		box-shadow: 1px 1px 1px 0 rgba(0, 0, 0, 0.1), -1px -1px 3px 0 rgba(0, 0, 0, 0.1);
	}

	.card-tag {
		height: 60rpx;
		width: 170rpx;
		border-radius: 0 20rpx 0 20rpx;
		color: #fff;
	}

	.single {
		overflow: hidden;
		width-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}

	.scroll-view {
		white-space: nowrap;
		height: 1500upx;
		width: 100%;
	}
</style>